<template>
  <div class="database_wrap">
    <div class="database">
      <div class="top_header_wrap">
        <topHeader @dataModelFn="dataModelFn" @clearData="clearAllData" />
      </div>
      <div class="router_view">
        <div class="itemLeft">
          <div class="itemLefthead">
            文件管理
            <div class="addBtn" @click="addFn(true)">新增</div>
          </div>
          <div class="itemList">
            <template v-for="item in allFileList">
              <el-checkbox
                :key="item.id"
                v-model="item.checked"
                class="item-checkd"
                :value="item.id"
                :label="item.fileType"
                @change="
                  (currCheck) => handleCheckedCitiesChange(currCheck, item)
                "
                border
              >
              </el-checkbox>
              <el-checkbox
                v-if="item.isHaveSubset"
                v-for="e in item.subsetFileNames"
                :key="item.id + e.id"
                v-model="e.checked"
                class="e-checkd"
                :title="e.display_name"
                :value="e.id"
                :label="e.display_name"
                @change="(currCheck) => handleCheckedCitiesChange(currCheck, e)"
                border
              >
              </el-checkbox>
            </template>
          </div>
        </div>
        <div class="itemCenter" :style="{ width: centerWidth + 'px' }">
          <div class="itemLefthead">
            {{ mouyulan }}
            <div class="itemCenterbtn">
              <!-- <div class="addBtnzz" @click="convertDialogVisibleFn(true)" size="small">
                转换
              </div> -->
              <el-button
                class="bin_button"
                size="small"
                @click="exprotfn('multipleTable1')"
              >
                导出
              </el-button>
              <el-button
                class="bin_button"
                size="small"
                @click="convertDialogShow"
              >
                转换
              </el-button>
              <!-- <div class="bin_button" @click="remove11" size="small">移除</div> -->
              <el-button
                style="margin-right: 20px"
                class="bin_button"
                size="small"
                @click="remove11"
              >
                移除
              </el-button>
            </div>
          </div>
          <div class="itemList">
            <div class="tableHeight" ref="tableHeight"></div>
            <el-table
              v-if="tableData1.length"
              :border="true"
              ref="multipleTable1"
              :data="tableData1"
              tooltip-effect="dark"
              style="width: fit-content"
              :height="tableH"
              class="bin_table"
              @scroll="handleScroll"
            >
              <el-table-column type="selection"> </el-table-column>
              <el-table-column
                width="170"
                resizable
                align="center"
                v-for="(item, index) in headList1"
                :key="index"
                sortable
                :prop="item.columnName"
                :label="item.columnDisplayName.toString()"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                resizable
                label="操作"
                width="170"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <i
                    class="el-icon-edit editBtn"
                    @click="editDialogVisibleFn1(scope.row)"
                  ></i>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageBox" v-if="tableData1.length">
              <el-pagination
                class="bin_fenyeqi"
                :current-page.sync="currPage1"
                :page-sizes="[10, 50, 100, 200, 500, 1000]"
                :pager-count="5"
                prev-text="上一页"
                next-text="下一页"
                popper-class="bin_fenyeqi_popper"
                layout="total, sizes,->,prev, pager, next"
                @current-change="table1ChangePage"
                @size-change="handleSizeChange1"
                :total="total1"
              >
                <!-- layout="prev, pager, next" -->
              </el-pagination>
            </div>
          </div>
        </div>
        <!-- 拖拽分隔条 -->
        <div class="divider-h" @mousedown="startDragH">⋮</div>
        <div class="itemRight" :style="{ width: rightWidth + 'px' }">
          <div class="itemLefthead">
            处理后文件
            <div class="itemCenterbtn">
              <el-button class="bin_button" size="small" @click="remove">
                移除
              </el-button>

              <el-button
                class="bin_button addBtnexport"
                @click="exprotfn('multipleTable2')"
                size="small"
              >
                导出
              </el-button>
            </div>
          </div>
          <div class="itemList">
            <el-table
              v-if="tableData2.length"
              :border="true"
              ref="multipleTable2"
              :data="tableData2"
              :row-key="
                (row) => {
                  return row.id;
                }
              "
              tooltip-effect="dark"
              style="width: 100%"
              :height="tableH"
              class="bin_table"
              @scroll="handleScroll"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" :reserve-selection="true">
              </el-table-column>
              <el-table-column
                width="170"
                resizable
                v-for="(item, index) in headList2"
                :key="index"
                sortable
                align="center"
                :prop="item.columnName"
                :label="item.columnDisplayName"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                resizable
                label="操作"
                width="170"
                align="center"
              >
                <template slot-scope="scope">
                  <i
                    class="el-icon-edit editBtn"
                    @click="editDialogVisibleFn(scope.row)"
                  ></i>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageBox" v-if="tableData2.length">
              <!-- <div class="pageInfo">
                <span class="size">{{ 10 }}</span>
                条每页，共{{ total2 }}条
              </div> -->
              <el-pagination
                class="bin_fenyeqi"
                :current-page.sync="currPage2"
                :page-sizes="[10, 50, 100, 200, 500, 1000]"
                :pager-count="5"
                prev-text="上一页"
                next-text="下一页"
                popper-class="bin_fenyeqi_popper"
                layout="total, sizes,->,prev, pager, next"
                @current-change="table2ChangePage"
                @size-change="handleSizeChange2"
                :total="total2"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog new_add_dialog dialog-1000 dialogh9"
      title="新增"
      :visible.sync="addModel"
      width="70%"
      top="10vh"
    >
      <div class="addContent">
        <div class="addItem">
          <div class="addName">文件来源：</div>
          <div class="addInput">
            <el-radio-group class="addChekoutRaio" v-model="fileRadioValue">
              <el-radio :label="1">端口</el-radio>
              <el-radio :label="2">USB/本地文件</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- <div class="addItem">
          <div class="addName">文件类型：</div>
          <div class="addInput">
            <el-checkbox-group v-model="checkboxGroup" size="small">
              <el-checkbox
                class="addChekoutFile"
                v-for="item in checkboxGroupList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                border
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div> -->
        <div class="addItem">
          <div class="addName">文件打开：</div>
          <div class="addInput">
            <!-- :http-request="uploadFn" -->
            <el-upload
              class="upload-demo"
              ref="upload"
              multiple
              :file-list="fileList"
              :auto-upload="false"
              :show-file-list="false"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-progress="progressFile"
              :on-change="changeFile"
            >
              <el-button class="bin_button" size="mini">选择文件</el-button>
            </el-upload>
          </div>
        </div>
        <div class="addItem">
          <div class="addName">文件预览：</div>
          <div class="addInput" ref="filePreview">
            <el-table
              :border="true"
              ref="multipleTable"
              :data="fileList"
              tooltip-effect="dark"
              style="width: 95%"
              height="55vh"
              class="bin_table"
            >
              <el-table-column resizable type="selection"> </el-table-column>
              <el-table-column
                min-width="170"
                resizable
                prop="name"
                label="文件名称"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                min-width="170"
                resizable
                prop="type"
                label="文件类别"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                min-width="170"
                resizable
                prop="size"
                label="文件大小"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ formatFileSize(scope.row.size) }}
                </template>
              </el-table-column>

              <el-table-column resizable label="操作" width="80" align="center">
                <!--  -->
                <template slot-scope="scope">
                  <i class="el-icon-delete editBtn" @click="del(scope.row)"></i>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="btnContent host_btn">
        <div class="host">IP地址：{{ hostAddress }}</div>
        <div class="btns">
          <el-button class="bin_button" size="small" @click="hideAdd"
            >取消</el-button
          >
          <el-button class="bin_button" size="small" @click="submitUpload"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-800"
      title="导出"
      :visible.sync="exprotModel"
      width="50%"
    >
      <div class="addContent">
        <div class="addItem">
          <div class="addName">导出位置：</div>
          <div class="addInput">
            <el-input
              class="exportInput"
              placeholder="请选择导出位置"
              v-model="exportfileValue"
            >
              <template slot="append">
                <div>浏览</div>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <div class="btnContent">
        <el-button
          class="bin_button"
          size="small"
          @click="exprotModelFn(false)"
        >
          取消
        </el-button>
        <el-button
          class="bin_button"
          size="small"
          @click="exprotModelFn(false)"
        >
          确定
        </el-button>
      </div>
      <div class="convert_status">
        <div class="convert_status_item status_ing">
          <div class="icon el-icon-loading"></div>
          <div class="name">转换中</div>
        </div>
        <div class="convert_status_item status_done">
          <div class="name">转换完成</div>
        </div>
        <div class="convert_status_item status_fail">
          <div class="name">转换失败</div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="设置"
      :before-close="handleClose"
      :visible.sync="settingDialogShow"
      width="40%"
    >
      <div class="addContent">
        <div class="addItem">
          <div class="addName ls">后端数据保存位置：</div>
          <div class="addInput">
            <el-input
              class="exportInput"
              placeholder="请输入"
              v-model="dataValue"
            >
            </el-input>
          </div>
        </div>
      </div>
      <div class="btnContent">
        <el-button class="bin_button" size="small" @click="dataModelFn(false)">
          取消
        </el-button>
        <el-button class="bin_button" size="small" @click="dataModelFn(false)">
          确定
        </el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <div class="edit_dialog">
      <el-dialog
        v-zsdialogDrag
        :closeOnClickModal="false"
        class="bin_dialog dialog-1000"
        title="编辑"
        :visible.sync="editDialogVisible"
        width="600px"
      >
        <div class="edit_list">
          <div class="edit_item" v-if="currTableType !== 1">
            <div class="name">文件名称：</div>
            <div class="ipt">
              <el-input
                class="bin_input"
                v-model="currEdit.displayName"
                placeholder="请输入名称"
              ></el-input>
            </div>
          </div>
          <template v-if="currTableType === 1">
            <div
              class="edit_item"
              v-for="(value, key, index) in currEdit.jsonMap"
              :key="index"
            >
              <div class="name">{{ key }}：</div>
              <div class="ipt">
                <el-input
                  class="bin_input"
                  :disabled="key === '修改时间' || key === '创建时间'"
                  v-model="currEdit.jsonMap[key]"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
          </template>
          <template v-if="currTableType === 0">
            <div class="edit_item">
              <div class="name">密级：</div>
              <div class="ipt">
                <el-select
                  filterable
                  class="bin_select"
                  v-model="currEdit.secretLevel"
                  placeholder="请选择密级"
                >
                  <el-option
                    v-for="(item, index) in secrit"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                    :disabled="item.disabled"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="edit_item">
              <div class="name">上传人：</div>
              <div class="ipt">
                <el-input
                  class="bin_input"
                  v-model="currEdit.uploadUser"
                  placeholder="请输入上传人"
                ></el-input>
              </div>
            </div>
            <div class="edit_item">
              <div class="name">备注：</div>
              <div class="ipt">
                <el-input
                  class="bin_input"
                  type="textarea"
                  v-model="currEdit.remark"
                  placeholder="请输入备注"
                ></el-input>
              </div>
            </div>
            <div class="edit_item">
              <div class="name">文件格式：</div>
              <div class="ipt">
                <el-input
                  class="bin_input"
                  v-model="currEdit.fileType"
                  disabled
                ></el-input>
              </div>
            </div>
            <div class="edit_item">
              <div class="name">文件大小：</div>
              <div class="ipt">
                <el-input
                  class="bin_input"
                  v-model="currEdit.fileSize"
                  disabled
                ></el-input>
              </div>
            </div>
            <!-- <div class="edit_item">
              <div class="name">位深率：</div>
              <div class="ipt">
                <el-input
                  class="bin_input"
                  v-model="currEdit.bitDepthRate"
                  disabled
                ></el-input>
              </div>
            </div> -->
            <div class="edit_item" v-if="currCheckId === 'WAV'">
              <div class="name">采样率：</div>
              <div class="ipt">
                <el-input
                  class="bin_input"
                  v-model="currEdit.samplingRate"
                  disabled
                ></el-input>
              </div>
            </div>
          </template>
        </div>
        <div class="edit_btns">
          <el-button class="bin_button" size="small" @click="editDialogHide">
            取消
          </el-button>
          <el-button class="bin_button" size="small" @click="editCommit">
            确认
          </el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 转换弹窗 -->
    <div class="convert_dialog">
      <el-dialog
        v-zsdialogDrag
        :closeOnClickModal="false"
        class="bin_dialog dialog-1000"
        :close-on-click-modal="false"
        title="转换"
        :visible.sync="convertDialogVisible"
        @close="clear"
        width="60%"
      >
        <div class="convert_main">
          <div class="convert_boxs">
            <!-- <div class="boxs_title">转换前</div> -->
            <div class="boxs_content">
              <template v-if="currCheckId === 'BIN'">
                <el-row>
                  <el-col :span="16">
                    <div class="boxs_item">
                      <div class="name">协议名称：</div>
                      <div class="ipt">
                        <el-input
                          class="bin_input"
                          disabled
                          :value="xymc"
                        ></el-input>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <div class="boxs_item">
                      <div class="name">格式转化：</div>
                      <div class="ipt">
                        <el-input
                          class="bin_input"
                          disabled
                          :value="currCheckId"
                        ></el-input>
                      </div>
                      <div class="convert_center">
                        <div class="icon el-icon-d-arrow-right"></div>
                      </div>
                      <div class="ipt">
                        <el-input
                          class="bin_input"
                          disabled
                          value="wav"
                        ></el-input>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <!-- <el-row>
                  <el-col :span="16">
                    <div class="boxs_item">
                      <div class="name">文件名称：</div>
                      <div class="ipt">
                        <el-input class="bin_input" disabled :value="binFileName"></el-input>
                      </div>
                    </div>
                  </el-col>
                </el-row> -->
                <el-row>
                  <el-col :span="16">
                    <div class="boxs_item">
                      <div class="name">类型：</div>
                      <div class="ipt">
                        <el-radio-group v-model="radioType">
                          <el-radio label="low">低频</el-radio>
                          <el-radio label="mid">中频</el-radio>
                          <el-radio label="high">高频</el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <div class="boxs_item">
                      <div class="name">通道：</div>
                      <div class="ipt">
                        <el-input
                          class="bin_input"
                          placeholder="请输入通道数用+连接，例如：1+2+3"
                          v-model="binTongdao"
                        ></el-input>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </template>
              <template v-if="currCheckId != 'BIN' && currCheckId != 'DAT'">
                <el-row>
                  <el-col :span="16">
                    <div class="boxs_item">
                      <div class="name">格式转化：</div>
                      <div class="ipt">
                        <el-input
                          class="bin_input"
                          disabled
                          :value="currCheckId"
                        ></el-input>
                      </div>
                      <div class="convert_center">
                        <div class="icon el-icon-d-arrow-right"></div>
                      </div>
                      <div class="ipt">
                        <el-select
                          filterable
                          v-model="convertGeshiValue"
                          class="bin_select"
                          popper-class="bin_fenyeqi_popper"
                          placeholder="请选择格式"
                          clearable
                          v-if="
                            currCheckId != 'XLS' &&
                            currCheckId != 'XLSX' &&
                            currCheckId != 'CSV'
                          "
                        >
                          <el-option
                            v-for="(item, index) in optionss[currCheckId]"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                        <el-input
                          v-else
                          class="bin_input"
                          disabled
                          :value="currCheckIdValue"
                        ></el-input>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row
                  v-if="
                    currCheckId != 'XLS' &&
                    currCheckId != 'XLSX' &&
                    currCheckId != 'CSV'
                  "
                >
                  <el-col :span="8">
                    <!-- WAV==>DAT -->
                    <div
                      class="boxs_item"
                      v-if="currCheckId == 'WAV' && convertGeshiValue == '4'"
                    >
                      <div class="name">转换后位深：</div>
                      <div class="ipt">
                        <el-select
                          filterable
                          v-model="bitNum"
                          placeholder="请选择位深"
                          class="bin_select"
                          popper-class="bin_fenyeqi_popper"
                        >
                          <el-option
                            v-for="item in options6"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                    <!-- WAV==>WAV -->
                    <div
                      class="boxs_item"
                      v-else-if="
                        currCheckId == 'WAV' && convertGeshiValue == '5'
                      "
                    >
                      <div class="name">转换后采样率：</div>
                      <div class="ipt">
                        <el-input
                          class="bin_input"
                          :value="sampleRate"
                          placeholder="请输入采样率"
                          @input="handleInput"
                        ></el-input>
                        <!-- <el-select v-model="options1value" placeholder="请选择采样率" class="bin_select"
                          popper-class="bin_fenyeqi_popper">
                          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select> -->
                      </div>
                    </div>
                    <!-- <div class="boxs_item" v-else>
                      <div class="name">转换通道：</div>
                      <div class="ipt">
                        <el-select v-model="options1value" placeholder="请选择通道" class="bin_select"
                          popper-class="bin_fenyeqi_popper">
                          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </div>
                    </div> -->
                    <!-- currCheckId != 'WAV' -->
                  </el-col>
                </el-row>
                <el-row
                  v-if="
                    currCheckId != 'XLS' &&
                    currCheckId != 'XLSX' &&
                    currCheckId != 'CSV' &&
                    currCheckId != 'WAV'
                  "
                >
                  <el-col :span="8">
                    <div class="boxs_item">
                      <div class="name">数据格式：</div>
                      <div class="ipt">
                        <el-select
                          filterable
                          v-model="options2value"
                          placeholder="请选择数据格式类型"
                          class="bin_select"
                          popper-class="bin_fenyeqi_popper"
                          @change="chooseType"
                        >
                          <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row
                  v-if="
                    currCheckId != 'XLS' &&
                    currCheckId != 'XLSX' &&
                    currCheckId != 'CSV' &&
                    currCheckId != 'WAV'
                  "
                >
                  <el-col :span="8">
                    <div class="boxs_item">
                      <div class="name">通道选择：</div>
                      <div class="ipt">
                        <el-select
                          filterable
                          v-model="options3value"
                          placeholder="请选择转换通道"
                          class="bin_select"
                          popper-class="bin_fenyeqi_popper"
                          multiple
                        >
                          <el-option
                            v-for="item in options3"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </template>
              <template v-if="options2value == '其他'">
                <el-row>
                  <el-col :span="24">
                    <div class="boxs_item">
                      <div class="name">参数配置：</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <div class="boxs_item">
                      <div class="name">采样率：</div>
                      <div class="ipt">
                        <el-input
                          v-model="input"
                          placeholder="请输入采样率"
                          popper-class="bin_fenyeqi_popper"
                        ></el-input>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8" style="margin-left: 40px">
                    <div class="boxs_item">
                      <div class="name">数据起点：</div>
                      <div class="ipt">
                        <el-input
                          v-model="input"
                          placeholder="请输入数据起点"
                          popper-class="bin_fenyeqi_popper"
                        ></el-input>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <div class="boxs_item">
                      <div class="name">位深：</div>
                      <div class="ipt">
                        <el-select
                          filterable
                          v-model="value"
                          placeholder="请选择位深"
                          class="bin_select"
                          popper-class="bin_fenyeqi_popper"
                        >
                          <el-option
                            v-for="item in options4"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8" style="margin-left: 40px">
                    <div class="boxs_item">
                      <div class="name">大小端：</div>
                      <div class="ipt">
                        <el-select
                          filterable
                          v-model="value"
                          placeholder="请选择大小端"
                          class="bin_select"
                          popper-class="bin_fenyeqi_popper"
                        >
                          <el-option
                            v-for="item in options5"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </template>
              <template v-if="currCheckId === 'DAT'">
                <el-row>
                  <el-col :span="16">
                    <div class="boxs_item">
                      <div class="name">协议名称：</div>
                      <div class="ipt">
                        <el-select
                          filterable
                          v-model="xymc"
                          placeholder="请选择通道"
                          class="bin_select"
                          popper-class="bin_fenyeqi_popper"
                        >
                          <el-option key="0" label="协议二" value="协议二">
                          </el-option>
                          <el-option key="1" label="其他" value="其他">
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <template v-if="xymc === '协议二'">
                  <el-row>
                    <el-col :span="16">
                      <div class="boxs_item">
                        <div class="name">格式转化：</div>
                        <div class="ipt">
                          <el-input
                            class="bin_input"
                            disabled
                            :value="currCheckId"
                          ></el-input>
                        </div>
                        <div class="convert_center">
                          <div class="icon el-icon-d-arrow-right"></div>
                        </div>
                        <div class="ipt">
                          <el-input
                            class="bin_input"
                            disabled
                            value="wav"
                          ></el-input>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="16">
                      <div class="boxs_item">
                        <div class="name">绞合方向：</div>
                        <div class="ipt">
                          <el-radio-group v-model="jhradioType">
                            <el-radio label="left">左缆</el-radio>
                            <el-radio label="right">右缆</el-radio>
                          </el-radio-group>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="16">
                      <div class="boxs_item">
                        <div class="name">类型：</div>
                        <div class="ipt">
                          <el-radio-group v-model="radioType">
                            <el-radio label="low">低频</el-radio>
                            <el-radio label="mid">中频</el-radio>
                          </el-radio-group>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="16">
                      <div class="boxs_item">
                        <div class="name">通道：</div>
                        <div class="ipt">
                          <el-input
                            class="bin_input"
                            placeholder="请输入通道数用+连接，例如：1+2+3"
                            v-model="binTongdao"
                          ></el-input>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </template>
                <template v-if="xymc === '其他'">
                  <el-row>
                    <el-col :span="8">
                      <div class="boxs_item">
                        <div class="name">原始采样：</div>
                        <div class="ipt" style="margin-right: 10px">
                          <el-input
                            class="bin_input"
                            placeholder="请输入"
                            v-model="input_sample_rate"
                          ></el-input>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="boxs_item">
                        <div class="name">输出采样：</div>
                        <div class="ipt">
                          <el-input
                            class="bin_input"
                            placeholder="请输入"
                            v-model="output_sample_rate"
                          ></el-input>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <div class="boxs_item">
                        <div class="name">原始位深：</div>
                        <div class="ipt" style="margin-right: 10px">
                          <el-select
                            filterable
                            v-model="input_bit_depth"
                            placeholder="请选择"
                            class="bin_select"
                            popper-class="bin_fenyeqi_popper"
                          >
                            <el-option label="8" value="8" key="8">8</el-option>
                            <el-option label="16" value="16" key="16"
                              >16</el-option
                            >
                            <el-option label="32" value="32" key="32"
                              >32</el-option
                            >
                          </el-select>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="boxs_item">
                        <div class="name">输入位深：</div>
                        <div class="ipt">
                          <el-select
                            filterable
                            v-model="output_bit_depth"
                            placeholder="请选择"
                            class="bin_select"
                            popper-class="bin_fenyeqi_popper"
                          >
                            <el-option label="8" value="8" key="8">8</el-option>
                            <el-option label="16" value="16" key="16"
                              >16</el-option
                            >
                            <el-option label="32" value="32" key="32"
                              >32</el-option
                            >
                          </el-select>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="16">
                      <div class="boxs_item">
                        <div class="name" style="width: 110px">
                          导出通道数：
                        </div>
                        <div class="ipt">
                          <el-input
                            class="bin_input"
                            placeholder="请输入"
                            v-model="channels"
                          ></el-input>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="16">
                      <div class="boxs_item">
                        <div class="name" style="width: 110px">
                          数据起始点：
                        </div>
                        <div class="ipt">
                          <el-input
                            class="bin_input"
                            placeholder="请输入"
                            v-model="data_start"
                          ></el-input>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="16">
                      <div class="boxs_item">
                        <div class="name">字节序：</div>
                        <div class="ipt">
                          <el-select
                            filterable
                            v-model="endian"
                            placeholder="请选择"
                            class="bin_select"
                            popper-class="bin_fenyeqi_popper"
                          >
                            <el-option label="大端" value="big" key="3"
                              >大端</el-option
                            >
                            <el-option label="小端" value="little" key="5"
                              >小端</el-option
                            >
                          </el-select>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </template>
              </template>
            </div>
          </div>
          <!-- <div class="convert_center">
            <div class="icon el-icon-d-arrow-right"></div>
          </div> -->
          <!-- <div class="convert_boxs">
            <div class="boxs_title">转换后</div>
            <div class="boxs_content">
              <div class="boxs_item">
                <div class="name">格式转化：</div>
                <div class="ipt">
                  <el-select
                    v-model="convertGeshiValue"
                    class="bin_select"
                    popper-class="bin_fenyeqi_popper"
                    placeholder="请选择格式"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in optionss[currCheckId]"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <template v-if="convertGeshiValue === '1' || convertGeshiValue === '4'">
                <div class="boxs_item">
                  <div class="name">转换后位深：</div>
                  <div class="ipt">
                    <el-select
                      v-model="bitNum"
                      class="bin_select"
                      placeholder="请选择位深"
                      clearable
                    >
                      <el-option label="8" value="8"> </el-option>
                      <el-option label="16" value="16"> </el-option>
                      <el-option label="32" value="32"> </el-option>
                    </el-select>
                  </div>
                </div>
              </template>
              <template v-if="convertGeshiValue === '1' || convertGeshiValue === '5'">
                <div class="boxs_item">
                  <div class="name">转换后采样率：</div>
                  <div class="ipt">
                    <el-input
                      class="bin_input"
                      v-model="sampleRate"
                      placeholder="请输入内容"
                    >
                    </el-input>
                  </div>
                </div>
              </template>
            </div>
          </div> -->
        </div>
        <div class="convert_btns">
          <el-button class="bin_button" size="small" @click="convertDialogHide">
            取消
          </el-button>
          <el-button class="bin_button" size="small" @click="convertCommit(0)">
            开始转换
          </el-button>
        </div>
        <!-- <div class="convert_status">
          <div class="convert_status_item status_ing">
            <div class="icon el-icon-loading"></div>
            <div class="name">转换中</div>
          </div>
          <div class="convert_status_item status_done">
            <div class="name">转换完成</div>
          </div>
          <div class="convert_status_item status_fail">
            <div class="name">转换失败</div>
          </div>
        </div> -->
      </el-dialog>
    </div>
    <!-- 转换弹窗 -->
    <div class="convert_dialog">
      <el-dialog
        v-zsdialogDrag
        :closeOnClickModal="false"
        class="bin_dialog dialog-1000"
        :close-on-click-modal="false"
        title="转换"
        :visible.sync="convertDataVisible"
        @close="clear"
        width="60%"
      >
        <el-form ref="form" label-position="left" label-width="110px">
          <div class="param_set">
            <div class="title_label">
              <span>
                经纬度转换
                <i class="switch-after"> （转换后为：例：116.12） </i>
              </span>
              <el-button class="bin_button" size="small" @click="addinput">
                新增
              </el-button>
            </div>
            <div class="params_box">
              <div
                class="paramsItem"
                v-for="(item, index) in dataConvertList"
                :key="index"
              >
                <template v-if="item.dataProcessingType === 1">
                  <div class="params_form_box">
                    <div class="miniform_box">
                      <el-row style="width: 100%">
                        <el-col :span="10">
                          <el-form-item label="字段标识：">
                            <el-select
                              filterable
                              class="bin_select"
                              v-model="item.columnName"
                              placeholder="请选择字段标识"
                            >
                              <el-option
                                v-for="(item, index) in headList1"
                                :key="index"
                                :label="item.columnName"
                                :value="item.columnName"
                              >
                                {{ item.columnName }}
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="10" style="margin-left: 10px">
                          <el-form-item label="原数据类型：">
                            <el-select
                              filterable
                              class="bin_select"
                              v-model="item.convertCoordinateType"
                              placeholder="请选择原数据类型"
                            >
                              <el-option
                                v-for="(item, index) in headList33"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                              >
                                {{ item.label }}
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <div class="del" @click="delinput(index)">
                    <img
                      class="actBtn"
                      :src="require('../../assets/del.png')"
                      alt=""
                    />
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="output_set">
            <div class="title_label">
              <span>精度转换</span>
              <el-button class="bin_button" size="small" @click="addoutput">
                新增
              </el-button>
            </div>
            <div class="output_box">
              <div
                class="outputItem"
                v-for="(item, index) in dataConvertList"
                :key="index"
              >
                <template v-if="item.dataProcessingType === 2">
                  <div class="output_form_box">
                    <div class="miniform_box">
                      <el-row style="width: 100%">
                        <el-col :span="10">
                          <el-form-item label="字段标识：">
                            <el-select
                              filterable
                              class="bin_select"
                              v-model="item.columnName"
                              placeholder="请选择字段标识"
                            >
                              <el-option
                                v-for="(item, index) in headList1"
                                :key="index"
                                v-if="item.columnName"
                                :label="item.columnName"
                                :value="item.columnName"
                              >
                                {{ item.columnName }}
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="10" style="margin-left: 10px">
                          <el-form-item label="保留位数：">
                            <el-input-number
                              class="bin_input"
                              controls-position="right"
                              :min="0"
                              :max="10"
                              v-model="item.decimalPlaces"
                            ></el-input-number>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <div class="del" @click="deloutput(index)">
                    <img
                      class="actBtn"
                      :src="require('../../assets/del.png')"
                      alt=""
                    />
                  </div>
                </template>
              </div>
            </div>
          </div>
        </el-form>
        <div class="convert_btns">
          <el-button
            class="bin_button"
            size="small"
            @click="convertDataVisible = false"
          >
            取消
          </el-button>
          <el-button class="bin_button" size="small" @click="convertCommit(1)">
            开始转换
          </el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 导出弹窗 -->
    <el-dialog
      v-zsdialogDrag
      title="导出"
      :visible.sync="daochuDialogFlag"
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      width="50%"
      top="10vh"
      @closed="cancelDaochuFn"
    >
      <div class="daochu_wrap">
        <div class="daochu_type">
          <div class="type_title">导出类型:</div>
          <div class="type_ipt">
            <el-radio-group
              class="bin_radio"
              v-model="daochuType"
              @change="aaa()"
            >
              <el-radio :label="'1'">本地</el-radio>
              <el-radio :label="'2'">数据库</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div
          class="daochu_shujuku_wrap"
          v-if="daochuType === '2' && currTableType == '1'"
        >
          <div class="daochu_shujuku_type">
            <div class="type_title">导出到:</div>
            <div class="type_ipt">
              <el-radio-group
                class="bin_radio"
                :disabled="notChange"
                v-model="daochuShujukuType"
              >
                <el-radio :label="'1'">现有表单</el-radio>
                <el-radio :label="'2'">新建表单</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="daochu_shujuku_main">
            <div class="shujuku_tree_title">现有表单:</div>
            <div class="shujuku_tree_wrap">
              <div class="bin_tree_main">
                <el-tree
                  class="bin_tree"
                  :props="defaultProps"
                  :load="loadNodeFn"
                  @node-click="shujutreeNodeClickFn"
                  lazy
                >
                  <div class="custom-tree-node" slot-scope="{ node, data }">
                    <div class="custom_title">{{ node.label }}</div>
                    <div
                      class="custom_btns"
                      v-show="daochuShujukuType === '2' && node.level === 2"
                    >
                      <el-button
                        type="text"
                        size="mini"
                        class="bin_button"
                        icon="el-icon-circle-plus"
                        @click="appendTreeNodeFn(data)"
                      >
                        新建
                      </el-button>
                    </div>
                  </div>
                </el-tree>
              </div>
            </div>
          </div>
        </div>
        <div class="daochu_btns">
          <el-button type="primary" class="bin_button" @click="cancelDaochuFn"
            >取消</el-button
          >
          <el-button type="primary" class="bin_button" @click="startDaochuFn"
            >开始导出</el-button
          >
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="修改密码"
      :visible.sync="userDialogShow"
      :before-close="handleCloseUser"
      width="800px"
    >
      <setting-user-dialog
        @cancel="userDialogShow = false"
      ></setting-user-dialog>
    </el-dialog>
  </div>
</template>
<script>
import topHeader from "./components/topHeader.vue";
import tableWidth from "../../utils/fitTableColWidth.js";
import { index } from "d3";
import settingUserDialog from "@/components/settingUserDialog";
export default {
  name: "databasePage",
  components: { topHeader, settingUserDialog },
  data() {
    return {
      headList33: [
        {
          value: "1",
          label: "例：116°20321",
        },
        {
          value: "2",
          label: "例：116°12′11.56″",
        },
        {
          value: "3",
          label: "例：116度12分11.56秒",
        },
        {
          value: "4",
          label: "例：116°12.20′",
        },
        {
          value: "5",
          label: "例：116度12.20分",
        },
        {
          value: "6",
          label: "例：116°20321 E",
        },
        {
          value: "7",
          label: "例：116°12′11.56″ E",
        },
        {
          value: "8",
          label: "例：东经116度12分11.56秒",
        },
        {
          value: "9",
          label: "例：116°12.20′ E",
        },
        {
          value: "10",
          label: "例：东经116度12.20分",
        },
      ],
      options1: [
        {
          value: "选项1",
          label: "单通道",
        },
        {
          value: "选项2",
          label: "多通道",
        },
      ],
      options2: [
        {
          value: "选项1",
          label: "数据格式1",
        },
        {
          value: "选项2",
          label: "数据格式2",
        },
        {
          value: "选项3",
          label: "IQ格式",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      options3: [
        {
          value: "选项1",
          label: "通道1",
        },
        {
          value: "选项2",
          label: "通道2",
        },
      ],
      options4: [],
      options5: [
        {
          value: "选项1",
          label: "高位",
        },
        {
          value: "选项2",
          label: "低位",
        },
      ],
      options6: [
        {
          value: "8",
          label: "8",
        },
        {
          value: "16",
          label: "16",
        },
        {
          value: "32",
          label: "32",
        },
      ],
      value: "",
      options1value: "",
      options2value: "",
      options3value: "",
      bitNum: "", //WAV==>DAT位深值
      dataConvertList: [],
      datBitNum: "",
      bitNum: "",
      sampleRate: "",
      excelDataConvert: {
        // excel数据
        header: [],
        results: [],
      },
      currPage1: 1,
      currPageSize1: 10,
      total1: 0,
      headList1: [
        {
          columnName: "prop",
          columnDisplayName: "参数名称",
        },
      ],
      tableData1: [],
      currPage2: 1,
      currPageSize2: 10,
      total2: 0,
      headList2: [
        {
          columnName: "prop",
          columnDisplayName: "参数名称",
        },
      ],
      tableData2: [],
      // 1-非密、2-秘密、3-机密、4-绝密
      secrit: [
        {
          label: "未设置",
          value: 0,
          disabled: true,
        },
        {
          label: "非密",
          value: 1,
        },
        {
          label: "秘密",
          value: 2,
        },
        {
          label: "机密",
          value: 3,
        },
        {
          label: "绝密",
          value: 4,
        },
      ],
      hostAddress: "",
      currEdit: {},
      fileList: [],
      allFileList: [],
      currTableType: 0,
      currCheckId: 0,
      tableH: 0,
      radioType: "low", //bin格式转换 类型
      binFileName: "", //bin格式转换  文件名称
      binTongdao: "", //bin格式转换  协议一  通道
      jhradioType: "left", //day绞合方向
      currCheckIdValue: "", //
      convertGeshiValue: "",
      xymc: "",
      data_start: "",
      endian: "big",
      input_sample_rate: "",
      channels: "",
      output_sample_rate: "",
      input_bit_depth: "8",
      output_bit_depth: "8",
      editDialogVisible: false,
      convertDialogVisible: false,
      convertDataVisible: false,
      daochuDialogFlag: false,
      daochudialogDom: "",
      editDatetimeVal: "",
      editpickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      fileRadioValue: 2,
      dataValue: "",
      exportfileValue: "",
      setDateModel: false,
      exprotModel: false,
      addModel: false,
      checkboxGroup: [],
      checkboxGroupList: [
        {
          label: "WAV",
          value: "1",
        },
      ],
      optionss: {
        DAT: [
          {
            label: "WAV",
            value: "1",
            // 转换后采样率  sampleRate
            // 转换后位深 bitNum  8 16 32
            // 转换前位深 datBitNum
          },
        ],
        XLSX: [
          {
            label: "CSV",
            value: "2",
          },
        ],
        XLS: [
          {
            label: "CSV",
            value: "2",
          },
        ],
        CSV: [
          {
            label: "XLSX",
            value: "3",
          },
          {
            label: "XLS",
            value: "3",
          },
        ],

        WAV: [
          {
            label: "DAT",
            value: "4",
            // 转换后位深 bitNum
          },
          {
            label: "WAV",
            value: "5",
            // 转换后采样率 sampleRate
          },
        ],
      },

      HORIZONTAL_SCROLL_THRESHOLD: 5,
      VERTICAL_SCROLL_THRESHOLD: 5,

      previousScrollLeft: 0,
      previousScrollTop: 0,
      daochuType: "1",
      isClickDaochuType: "",
      daochuShujukuType: "1",
      defaultProps: {
        children: "dataTypeVoList",
        label: "dataTypeName",
        isLeaf: "leaf",
      },
      currentTreeItem: null,
      shujukuTreeData: [],
      datanewtype: "",
      selectedArrary: [],
      datachecktype: "",
      createnew: false,
      notChange: false,
      // 左右拖动需要用到的data
      centerWidth: 300,
      rightWidth: 300,
      draggingH: false,
      startX: 0,
      startCenterWidth: 0,
      startRightWidth: 0,
      minCenterWidth: 150, // 最小宽度限制
      minRightWidth: 150,
    };
  },
  computed: {
    userDialogShow: function () {
      // return false
      return this.$store.state.setUserDialogShow;
    },
    settingDialogShow: function () {
      return this.$store.state.settingDialogShow;
    },
    mouyulan: function () {
      return this.currTableType === 1 ? "数据预览" : "文件预览";
    },
  },
  created() {
    this.getAllFiles();
    this.getHost();
  },
  mounted() {
    this.$nextTick(() => {
      // 确保 DOM 已经渲染完成
      // const scrollWrapper = this.$refs.multipleTable1.$el.querySelector(
      //   ".el-table__body-wrapper"
      // );
      // if (scrollWrapper) {
      //   scrollWrapper.addEventListener("scroll", this.handleScroll);
      // }
    });
    this.fetTableHeight();
    // 左右拖动
    this.initWidths(); // 初始化宽度
    window.addEventListener("resize", this.handleResize);
    document.addEventListener("mousemove", this.onDrag);
    document.addEventListener("mouseup", this.endDrag);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器，防止内存泄漏
    // const scrollWrapper = this.$refs.multipleTable1.$el.querySelector(
    //   ".el-table__body-wrapper"
    // );
    // if (scrollWrapper) {
    //   scrollWrapper.removeEventListener("scroll", this.handleScroll);
    // }
    document.removeEventListener("mousemove", this.onDrag);
    document.removeEventListener("mouseup", this.endDrag);
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleInput(value) {
      // 使用正则表达式匹配正整数（包括0）
      this.sampleRate = value.replace(/[^0-9]/g, "").replace(/^(0*)$/, "0"); // 允许0，但不允许前导0（除了0本身）

      // this.inputValue = value.match(/^\d+$/g) ? value : this.inputValue;
    },
    async startDaochuFn() {
      let selected = this.$refs[this.daochudialogDom].selection;
      console.log(selected, "selected");
      if (this.daochuType === "1") {
        if (selected.length) {
          //本地走这两个
          if (this.currTableType === 1) {
            this.daochuDialogFlag = true;
            this.$api
              .exportExcelData(
                selected.map((e) => e.id),
                selected[0].fileId
              )
              .then((res) => {
                const url = window.URL.createObjectURL(new Blob([res]));
                const link = document.createElement("a");
                link.href = url;
                link.download = `file.${this.getFileType()}`;
                link.click();
                this.$message({
                  message: "导出成功",
                  type: "success",
                  onClose: () => {
                    this.daochuDialogFlag = false;
                  },
                });
              });
          } else if (this.currTableType === 0) {
            this.daochuDialogFlag = true;
            this.$api.exportFile(selected.map((e) => e.id)).then((res) => {
              const url = window.URL.createObjectURL(
                new Blob([res], { type: "application/xlsx" })
              );
              const link = document.createElement("a");
              link.href = url;
              link.download = `file.zip`;
              link.click();
              this.$message({
                message: "导出成功",
                type: "success",
                onClose: () => {
                  this.daochuDialogFlag = false;
                },
              });
            });
          }
        } else {
          this.$message({
            message: "请选择数据",
            type: "warning",
          });
        }
      } else {
        //当导出到的类型为现有表单或者新建表单时

        if (this.currTableType == 1) {
          if (this.daochuShujukuType == "1") {
            this.ysjtqDaochuZhaiquShujuGoBiaoDataFn(selected);
          } else {
            this.ysjtqDaochuZhaiquShujuGoNewBiaoDataFn(selected);
          }
        } else {
          this.newExpot(selected);
        }
      }
    },
    // 融合结果导出到新表 isCreated为2
    async newExpot(selected) {
      let data = {
        dataIds: selected.map((e) => e.id), //页面保存勾选的数据
        operationType: 4, //操作类型，1-元数据摘取、2-筛选融合、3-关联判证、4-原始数据导入
        dataType: 1,
      };
      let res = await this.$api.rongheExportToDatabase(data);
      if (res.code === 200) {
        this.$message({
          message: res.result,
          type: "success",
          onClose: () => {
            this.daochuDialogFlag = false;
          },
        });
      }
    },
    aaa() {
      this.daochuShujukuType = "1";
      this.notChange = false;
    },
    cancelDaochuFn() {
      this.notChange = false;
      this.daochuShujukuType = "1";
      this.daochuType = "1";
      this.daochuDialogFlag = false;
    },
    chooseType() {
      console.log(this.options2value, "chooseType");
    },
    table1ChangePage(val) {
      // console.log("当前页====", val);
      this.currPage1 = val;
      if (this.currTableType === 1) {
        this.getDataTable1();
      } else if (this.currTableType === 0) {
        this.getFileTable1();
      }
    },
    handleSizeChange1(val) {
      // console.log("当前页规模===", val);
      this.currPage1 = 1;
      this.currPageSize1 = val;
      if (this.currTableType === 1) {
        this.getDataTable1();
      } else if (this.currTableType === 0) {
        this.getFileTable1();
      }
    },
    table2ChangePage(val) {
      this.currPage2 = val;
      if (this.currTableType === 1) {
        this.getDataTable2();
      } else if (this.currTableType === 0) {
        this.getFileTable2();
      }
    },
    handleSizeChange2(val) {
      this.currPage2 = 1;
      this.currPageSize2 = val;
      if (this.currTableType === 1) {
        this.getDataTable2();
      } else if (this.currTableType === 0) {
        this.getFileTable2();
      }
    },
    addinput() {
      this.dataConvertList = this.dataConvertList.concat({
        dataProcessingType: 1,
        fileType: 1,
        ids: [this.currCheckId],
      });
    },
    addoutput() {
      this.dataConvertList = this.dataConvertList.concat({
        dataProcessingType: 2,
        fileType: 1,
        ids: [this.currCheckId],
      });
    },
    delinput(idx) {
      this.dataConvertList = this.dataConvertList.filter((item, index) => {
        return index !== idx;
      });
    },
    deloutput(idx) {
      this.dataConvertList = this.dataConvertList.filter((item, index) => {
        return index !== idx;
      });
    },
    remove11() {
      let selected = this.$refs.multipleTable1.selection;
      if (selected.length) {
        this.$api
          .shiftOutConversion(
            selected.map((e) => e.id),
            this.currTableType
          )
          .then((res) => {
            if (res.code == 200) {
              if (this.currTableType === 1) {
                this.getDataTable();
              } else {
                this.getFileTable();
              }
            }
          });
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },
    clearAllData() {
      this.getAllFiles();
      this.tableData1 = [];
      this.tableData2 = [];
      this.headList1 = [
        {
          columnName: "prop",
          columnDisplayName: "参数名称",
        },
      ];
      this.headList2 = [
        {
          columnName: "prop",
          columnDisplayName: "参数名称",
        },
      ];

      this.currPage1 = 1;
      this.currPageSize1 = 10;
      this.total1 = 0;
      this.currPage2 = 1;
      this.currPageSize2 = 10;
      this.total2 = 0;
    },
    handleClose() {
      this.$store.dispatch("setSettingDialogShow", false);
    },
    handleCloseUser() {
      this.$store.dispatch("setUserDialogShow", false);
    },
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.tableH = 0;
        resolve();
      });
    },
    fetTableHeight() {
      this.resetHeight().then((res) => {
        this.tableH =
          this.$refs.tableHeight.getBoundingClientRect().height - 10;
      });
    },
    getFileType() {
      let type = "";
      console.log(this.allFileList, this.currCheckId);
      this.allFileList.forEach((item) => {
        if (item.isHaveSubset) {
          let arrCurr = item.subsetFileNames.filter((e) => {
            return e.id == this.currCheckId;
          });
          if (arrCurr.length) {
            type = item.fileType;
          }
        }
      });
      return type;
    },
    exprotfn(dom) {
      let selected = this.$refs[dom].selection;
      if (selected.length) {
        this.daochudialogDom = dom;
        console.log(selected);
        //本地走这两个
        if (this.currTableType === 1) {
          this.daochuDialogFlag = true;
          // this.$api
          //   .exportExcelData(
          //     selected.map((e) => e.id),
          //     selected[0].fileId
          //   )
          //   .then((res) => {
          //     const url = window.URL.createObjectURL(new Blob([res]));
          //     const link = document.createElement("a");
          //     link.href = url;
          //     link.download = `file.${this.getFileType()}`;
          //     link.click();
          //     this.$message({
          //       message: "导出成功",
          //       type: "success",
          //     });
          //   });
        } else if (this.currTableType === 0) {
          this.daochuDialogFlag = true;
          // this.$api.exportFile(selected.map((e) => e.id)).then((res) => {
          //   const url = window.URL.createObjectURL(
          //     new Blob([res], { type: "application/xlsx" })
          //   );
          //   const link = document.createElement("a");
          //   link.href = url;
          //   link.download = `file.zip`;
          //   link.click();
          //   this.$message({
          //     message: "导出成功",
          //     type: "success",
          //   });
          // });
        }
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },
    handleScroll(e) {
      const { scrollLeft, scrollTop } = event.target;
      const scrollLeftDelta = scrollLeft - this.previousScrollLeft;
      const scrollTopDelta = scrollTop - this.previousScrollTop;

      // 判断横向滚动
      if (Math.abs(scrollLeftDelta) > this.HORIZONTAL_SCROLL_THRESHOLD) {
        console.log("发生了显著的横向滚动");
        console.log(e, e.target);
        // 处理横向滚动的逻辑
      }

      // 判断纵向滚动
      if (Math.abs(scrollTopDelta) > this.VERTICAL_SCROLL_THRESHOLD) {
        console.log("发生了显著的纵向滚动");
        // 处理纵向滚动的逻辑
      }

      // 更新之前的滚动位置，以便下次比较
      this.previousScrollLeft = scrollLeft;
      this.previousScrollTop = scrollTop;

      // if (this.isScrolling) return; // 如果已经在滚动中，则直接返回
      // this.isScrolling = true; // 设置正在滚动状态
      // const scrollLeft = target.scrollLeft; // 获取滚动位置

      // // 同步滚动到另一个表格
      // window.jiwo = this.$refs.multipleTable1.$el.querySelector(
      //   ".el-table__body-wrapper"
      // ).scrollLeft = scrollLeft;
      // this.$refs.multipleTable2.$el.querySelector(
      //   ".el-table__body-wrapper"
      // ).scrollLeft = scrollLeft;

      // // 在一段时间后重置滚动状态，防止连续滚动时的误判
      // setTimeout(() => {
      //   this.isScrolling = false;
      // }, 100);
    },
    handleCheckedCitiesChange(check, curr) {
      console.log(check, "check");
      console.log(curr, "curr");
      if (!curr.display_name) {
        this.datachecktype = "1";
      } else {
        this.datachecktype = "2";
      }
      if (this.currCheckId !== curr.id) {
        console.log(curr, "curr");
        this.currCheckId = curr.id;
        //.display_name是子集的名字
        if (curr.display_name) {
          this.currTableType = 1;
          this.currPage1 = 1;
          this.currPage2 = 1;
          this.total1 = 0;
          this.total2 = 0;
          this.datanewtype = 2;
          // this.daochuType = 1;
          this.getDataTable();
        } else {
          this.currTableType = 0;
          this.currPage1 = 1;
          this.currPage2 = 1;
          this.total1 = 0;
          this.total2 = 0;
          this.datanewtype = 1;
          // this.daochuType = 2;
          this.getFileTable();
        }
      } else {
        this.currCheckId = curr.id;
      }
      let arr = this.allFileList;
      arr.forEach((item) => {
        item.checked = false;
        if (item.id == curr.id) {
          item.checked = true;
        }
        if (item.id == curr.id && item.isHaveSubset) {
          item.subsetFileNames.forEach((e) => {
            // e.checked = false;
            // if (e.id == curr.id) {
            //   e.checked = true;
            // }
            e.checked = check;
          });
        } else if (item.isHaveSubset && item.id != curr.id) {
          item.subsetFileNames.forEach((e) => {
            if (e.id == curr.id) {
              e.checked = check;
            } else {
              e.checked = false;
            }
          });
        }
      });
      this.allFileList = JSON.parse(JSON.stringify(arr));
    },
    getFileTable() {
      this.getFileTable1();
      this.getFileTable2();
    },
    getFileTable1() {
      let params = {
        pageNum: this.currPage1,
        pageSize: this.currPageSize1,
        fileClassification: this.currCheckId,
        convertedFile: 0,
      };
      this.$api.getTempListByFileClassification(params).then((res) => {
        if (res.code == 200) {
          let header = [
            {
              columnName: "fileName",
              columnDisplayName: "文件名称",
            },
            {
              columnName: "fileType",
              columnDisplayName: "文件格式",
            },
            {
              columnName: "fileSize",
              columnDisplayName: "文件大小",
            },
            {
              columnName: "fileSize",
              columnDisplayName: "数据标注",
            },
            {
              columnName: "createTime",
              columnDisplayName: "上传时间",
            },
            {
              columnName: "fileUpdateTime",
              columnDisplayName: "修改时间",
            },
            {
              columnName: "remark",
              columnDisplayName: "备注",
            },
          ];
          this.tableData1 = res.result.content;
          this.headList1 = header.map((item, index) => {
            item.width = tableWidth(item.columnName, this.tableData1);
            return item;
          });
          this.total1 = res.result.totalSize;
        }
      });
    },
    getFileTable2() {
      let params = {
        pageNum: this.currPage2,
        pageSize: this.currPageSize2,
        fileClassification: this.currCheckId,
        convertedFile: 1,
      };
      this.$api.getTempListByFileClassification(params).then((res) => {
        if (res.code == 200) {
          let header = [
            {
              columnName: "fileName",
              columnDisplayName: "文件名称",
            },
            {
              columnName: "fileType",
              columnDisplayName: "文件格式",
            },
            {
              columnName: "fileSize",
              columnDisplayName: "文件大小",
            },
            {
              columnName: "createTime",
              columnDisplayName: "上传时间",
            },
            {
              columnName: "fileUpdateTime",
              columnDisplayName: "修改时间",
            },
            {
              columnName: "remark",
              columnDisplayName: "备注",
            },
          ];
          this.tableData2 = res.result.content;
          this.headList2 = header.map((item, index) => {
            item.width = tableWidth(item.columnName, this.tableData2);
            return item;
          });
          this.total2 = res.result.totalSize;
        }
      });
    },
    getDataTable() {
      this.getDataTable1();
      this.getDataTable2();
    },
    getDataTable1() {
      let params = {
        pageNum: this.currPage1,
        pageSize: this.currPageSize1,
        fileId: this.currCheckId,
        convertedData: 0,
      };
      this.$api.getTempListByExcelTable(params).then((res) => {
        if (res.code == 200) {
          let header = res.result.headers.sort((item) => {
            return item.columnOrder;
          });
          this.tableData1 = res.result.data.list.map((item) => {
            for (const key in item.jsonMap) {
              if (Object.hasOwnProperty.call(item.jsonMap, key)) {
                item[key] = item.jsonMap[key];
              }
            }
            return item;
          });
          this.headList1 = header.map((item, index) => {
            item.width = tableWidth(item.columnName, this.tableData1);
            return item;
          });
          this.total1 = res.result.data.total;
        }
      });
    },
    getDataTable2() {
      let params = {
        pageNum: this.currPage2,
        pageSize: this.currPageSize2,
        fileId: this.currCheckId,
        convertedData: 1,
      };
      this.$api.getTempListByExcelTable(params).then((res) => {
        if (res.code == 200) {
          let header = res.result.headers.sort((item) => {
            return item.columnOrder;
          });
          this.tableData2 = res.result.data.list.map((item) => {
            for (const key in item.jsonMap) {
              if (Object.hasOwnProperty.call(item.jsonMap, key)) {
                item[key] = item.jsonMap[key];
              }
            }
            return item;
          });
          this.headList2 = header.map((item, index) => {
            item.width = tableWidth(item.columnName, this.tableData2);
            return item;
          });
          this.total2 = res.result.data.total;
        }
      });
    },

    progressFile(event, file, fileList) {
      console.log("progressFile", event, file, fileList);
    },
    changeFile(files, fileList) {
      console.log("changeFile", files, fileList);

      for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i];
        this.$set(this.fileList, i, { ...file, type: file.raw.type });
      }
      console.log("改变文件后的fileList", this.fileList);
    },

    del(row) {
      const index = this.fileList.findIndex((item) => item.uid == row.uid);
      if (index > -1) {
        this.fileList.splice(index, 1);
      }
    },
    // 转换文件大小
    formatFileSize(bytes) {
      if (bytes === 0) return "0 B";

      const k = 1024; // 或 1000，取决于你的需求（KB = 1024 Bytes 或 1000 Bytes）
      const dm = (decimalPlaces) => (num) =>
        num.toFixed(decimalPlaces).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
      const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

      const i = Math.floor(Math.log(bytes) / Math.log(k));

      return dm(2)(bytes / Math.pow(k, i)) + " " + sizes[i];
    },
    getAllFiles() {
      this.$api.getFileClassification().then((res) => {
        if (res.code == 200) {
          this.allFileList = res.result.map((item) => {
            item.id = item.fileType;
            if (item.id === this.currCheckId) {
              item.checked = true;
            } else {
              item.checked = false;
            }
            if (item.isHaveSubset) {
              item.subsetFileNames.forEach((e) => {
                if (e.id === this.currCheckId) {
                  e.checked = true;
                } else {
                  e.checked = false;
                }
              });
            }
            return item;
          });
        }
      });
    },
    getHost() {
      this.$api.getHost().then((res) => {
        if (res.code == 200) {
          this.hostAddress = res.result;
        }
      });
    },
    hideAdd() {
      this.addModel = false;
      this.fileList = [];
      this.$refs.upload.clearFiles();
    },
    submitUpload() {
      let selected = this.$refs.multipleTable.selection;
      if (selected.length) {
        var data = new FormData();
        // public Result<String> addTempFile(MultipartFile[] multipartFiles,Byte fileSource){}
        this.$refs.multipleTable.selection.map((item, index) => {
          data.append(`multipartFiles`, item.raw);
          return item;
        });
        data.append("fileSource", this.fileRadioValue);
        this.$api.addTempFile(data).then((res) => {
          this.$refs.upload.clearFiles();
          this.addModel = false;
          this.fileList = [];
          this.getAllFiles();
        });
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },
    uploadFn() {
      console.log("uploadFn");
      var data = new FormData();
      let multipartFiles = this.$refs.multipleTable.selection.map((item) => {
        return item.raw;
      });
      data.append("file", multipartFiles);
      this.$api
        .addTempFile({ multipartFiles: data, fileSource: this.fileRadioValue })
        .then((res) => {
          console.log(res, "1507");
        })
        .catch((error) => {
          console.log(error, "error");
        });
    },
    editDialogVisibleFn1(row) {
      this.currEdit = JSON.parse(JSON.stringify(row));
      this.editDialogVisible = true;
    },
    editCommit() {
      if (this.currTableType == 0) {
        let form = {
          id: this.currEdit.id,
          fileName: this.currEdit.fileName,
          displayName: this.currEdit.displayName,
          fileType: this.currEdit.fileType,
          fileSource: this.currEdit.fileSource,
          fileSize: this.currEdit.fileSize,
          fileUpdateTime: this.currEdit.fileUpdateTime,
          filePath: this.currEdit.filePath,
          secretLevel: this.currEdit.secretLevel,
          uploadUser: this.currEdit.uploadUser,
          remark: this.currEdit.remark,
        };
        this.$api.updateTempFileInfo(form).then((res) => {
          if (res.code == 200) {
            this.editDialogVisible = false;
            // 提示用户
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getFileTable();
          }
        });
      } else if (this.currTableType == 1) {
        let form = {
          id: this.currEdit.id,
          secretLevel: this.currEdit.secretLevel,
          uploadUser: this.currEdit.uploadUser,
          remark: this.currEdit.remark,
          fileId: this.currEdit.fileId,
          jsonMap: this.currEdit.jsonMap,
        };
        this.$api.updateTempExcelData(form).then((res) => {
          if (res.code == 200) {
            this.editDialogVisible = false;
            this.getDataTable();
          }
        });
      }
    },
    remove() {
      let selected = this.$refs.multipleTable2.selection;
      if (selected.length) {
        this.$api
          .shiftOutConversion(
            selected.map((e) => e.id),
            this.currTableType
          )
          .then((res) => {
            if (res.code == 200) {
              if (this.currTableType === 1) {
                this.getDataTable();
              } else {
                this.getFileTable();
              }
            }
          });
      } else {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
      }
    },

    addFn(flag) {
      this.addModel = flag;
    },
    exprotModelFn(flag) {
      this.exprotModel = flag;
    },
    dataModelFn(flag) {
      this.setDateModel = flag;
    },
    editDialogHide() {
      this.editDialogVisible = false;
    },
    editDialogVisibleFn(row) {
      this.currEdit = JSON.parse(JSON.stringify(row));
      this.editDialogVisible = true;
    },
    convertCommit() {
      // type 0 文件   1 数据

      if (this.currTableType === 0) {
        let selected = this.$refs.multipleTable1.selection;
        if (selected.length) {
          let idsType = "";
          let jhradioType = "";
          let endian = "";
          let input_sample_rate = "";
          let channels = "";
          let output_sample_rate = "";
          let input_bit_depth = "";
          let output_bit_depth = "";
          let data_start = "";
          if (this.currCheckId === "BIN") {
            idsType = 6;
            if (this.binTongdao == "") {
              this.$message({
                message: "请输入通道！",
                type: "warning",
              });
              return;
            }
          } else if (this.currCheckId === "DAT") {
            if (this.xymc == "协议二") {
              idsType = 7;
              jhradioType = this.jhradioType;
              if (this.binTongdao == "") {
                this.$message({
                  message: "请输入通道！",
                  type: "warning",
                });
                return;
              }
            } else if (this.xymc == "其他") {
              idsType = 1;
              endian = this.endian;
              input_sample_rate = this.input_sample_rate;
              channels = this.channels;
              output_sample_rate = this.output_sample_rate;
              input_bit_depth = this.input_bit_depth;
              output_bit_depth = this.output_bit_depth;
              data_start = this.data_start;
              if (
                this.input_sample_rate == "" ||
                this.output_sample_rate == "" ||
                this.channels == "" ||
                this.data_start == ""
              ) {
                this.$message({
                  message:
                    "原始采样、输入采样、 导出通道数、数据起始点不能为空",
                  type: "warning",
                });
                return;
              }
            }
          } else {
            idsType = Number(this.convertGeshiValue);
          }
          let data = [];
          if (this.currCheckId === "DAT" && this.xymc == "其他") {
            data = [
              {
                fileType: this.currTableType,
                dataProcessingType: Number(idsType),
                ids: selected.map((e) => e.id),
                datBitNum: this.datBitNum,
                bitNum: this.bitNum,
                sampleRate: this.sampleRate,
                type: this.radioType,
                channelStrParam: this.binTongdao,
                sides: jhradioType,
                endian,
                input_sample_rate,
                channels,
                output_sample_rate,
                input_bit_depth,
                output_bit_depth,
                data_start,
              },
            ];
          } else if (this.currCheckId === "WAV") {
            if (this.convertGeshiValue == 4) {
              // wav==>dat
              data = [
                {
                  ids: selected.map((e) => e.id),
                  fileType: this.currTableType,
                  dataProcessingType: Number(idsType),
                  bitNum: this.bitNum, //位深
                },
              ];
            } else if (this.convertGeshiValue == 5) {
              // wav==>wav
              data = [
                {
                  ids: selected.map((e) => e.id),
                  fileType: this.currTableType,
                  dataProcessingType: Number(idsType),
                  sampleRate: this.sampleRate, //采样率
                },
              ];
            }
          } else {
            data = [
              {
                fileType: this.currTableType,
                dataProcessingType: Number(idsType),
                ids: selected.map((e) => e.id),
                datBitNum: this.datBitNum,
                bitNum: this.bitNum,
                sampleRate: this.sampleRate,
                type: this.radioType,
                channelStrParam: this.binTongdao,
                sides: jhradioType,
              },
            ];
          }
          if (this.xymc == "协议二" && this.currCheckId === "DAT") {
            data[0].channelsStrParam = this.binTongdao;
            data[0].types = this.radioType;
          }
          console.log(data);
          this.$api.dataProcessing(data).then((res) => {
            if (res.code == 200) {
              this.getAllFiles();
              this.getFileTable();
              this.convertDialogVisible = false;
              // 提示用户
              this.$message({
                message: res.result || "转换成功",
                type: "success",
              });
            }
          });
        } else {
          this.$message({
            message: "请在文件预览选择数据",
            type: "warning",
          });
        }
      } else {
        // 数据
        this.$api.dataProcessing(this.dataConvertList).then((res) => {
          if (res.code == 200) {
            this.getDataTable();
            this.convertDataVisible = false;
            this.$message({
              message: res.result || "转换成功",
              type: "success",
            });
          }
        });
      }
    },
    clear() {
      this.datBitNum = "";
      this.bitNum = "";
      this.sampleRate = "";
      this.convertGeshiValue = "";
      this.dataConvertList = [];
      this.xymc = ""; //协议名称
      this.radioType = "low"; //bin格式转换 类型
      this.binFileName = ""; //bin格式转换  文件名称
      this.binTongdao = ""; //bin格式转换  通道
      this.jhradioType = "left"; //day绞合方向

      this.endian = "big";
      this.input_sample_rate = "";
      this.channels = "";
      this.data_start = "";
      this.output_sample_rate = "";
      this.input_bit_depth = "8";
      this.output_bit_depth = "8";
    },
    convertDialogShow() {
      // this.currTableType 1 data    0 file
      console.log(this.currTableType, this.currCheckId, "1676");
      if (this.currTableType === 1) {
        this.convertDataVisible = true;
      } else if (this.currTableType === 0) {
        if (
          this.currCheckId === "WAV" ||
          this.currCheckId === "DAT" ||
          this.currCheckId === "CSV" ||
          this.currCheckId === "XLS" ||
          this.currCheckId === "XLSX" ||
          this.currCheckId === "BIN"
        ) {
          let selected = this.$refs.multipleTable1.selection;
          if (selected.length) {
            if (this.currCheckId == "BIN") {
              this.xymc = "协议一";
            }
            if (this.currCheckId == "DAT") {
              this.xymc = "协议二";
            }
            this.convertDialogVisible = true;
          } else {
            this.$message({
              message: "请在文件预览中选择文件",
              type: "warning",
            });
          }
          if (this.currCheckId === "XLS" || this.currCheckId === "XLSX") {
            this.currCheckIdValue = "CSV";
            this.convertGeshiValue = "2";
          }
          if (this.currCheckId === "CSV") {
            this.currCheckIdValue = "XLSX";
            this.convertGeshiValue = "3";
          }
        } else {
          this.$message({
            message: "请选择BIN/WAV/DAT/CSV/XLS/XLSX类型",
            type: "warning",
          });
        }
      }
    },
    convertDialogHide() {
      this.convertDialogVisible = false;
    },
    // 树节点点击事件
    shujutreeNodeClickFn(data, node) {
      // 选择的表的那一层
      if (node.level === 3) {
        this.currentTreeItem = data;
        //判断第三层的tree是否是新增的
        if (data.create) {
          this.createnew = data.create;
        } else {
          this.createnew = false;
        }
      } else {
        this.currentTreeItem = null;
      }
    },
    // 树的懒加载
    async loadNodeFn(node, resolve) {
      if (node.level === 0) {
        await this.ysjtqGetDaochuShujukuTree1Fn();
        return resolve(this.shujukuTreeData);
      } else if (node.level === 1) {
        return resolve(node.data.dataTypeVoList);
      } else if (node.level === 2) {
        console.log(node.data);
        let list = await this.ysjtqGetDaochuShujukuTree2Fn(
          node.data.databaseType,
          node.data.dataTypeId
        );
        return resolve(list);
      }
    },
    // 获取数据库tree-1
    async ysjtqGetDaochuShujukuTree1Fn() {
      let res = await this.$api.ysjtqGetFileTypeApi(1); // ysjtqGetDaochuShujukuTree1Api
      this.shujukuTreeData = res.result.map((item) => {
        return {
          ...item,
          dataTypeName: item.databaseTypeName,
          databaseType: item.databaseType,
        };
      });
      console.log(this.shujukuTreeData, "shujukuTreeData");
    },
    // 获取数据库tree-3
    async ysjtqGetDaochuShujukuTree2Fn(databaseType, dataTypeId) {
      let params = {
        databaseType,
        dataTypeId,
      };
      let res = await this.$api.ysjtqGetDaochuShujukuTree2Api(params);
      return res.result.map((item) => {
        return {
          ...item,
          dataTypeName: item.dataTableName,
          databaseType: item.databaseType,
          leaf: true,
        };
      });
    },
    // 新建表
    appendTreeNodeFn(data) {
      var _this = this;
      this.$prompt("请输入新建的文件夹名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.+$/,
        inputErrorMessage: "新建的文件夹名称不能为空~",
      })
        .then(({ value }) => {
          _this.notChange = true;
          const newChild = {
            id: new Date().getTime(),
            dataTypeName: value,
            databaseType: data.databaseType,
            dataTypeId: data.dataTypeId,
            dataType: this.datanewtype, //1 文件类型 2 数据类型 子集是数据类型
            leaf: true,
            create: true,
          };
          if (!data.dataTypeVoList) {
            _this.$set(data, "dataTypeVoList", []);
          }
          data.dataTypeVoList.push(newChild);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleSelectionChange(selection) {
      const selectedIds = selection.map((item) => item.id); // 假设选中行的 ID 是 id
      this.selectedArrary = selectedIds;
    },
    // 融合导出结果到现有表单 isCreated为1
    async ysjtqDaochuZhaiquShujuGoBiaoDataFn(selected) {
      if (this.currentTreeItem) {
        let data = {
          exportTableId: this.currCheckId,
          importTableId: this.currentTreeItem.dataTableId,
          dataIds: selected.map((e) => e.id),
          dataType: this.datachecktype,
          operationType: 4, //操作类型，1-元数据摘取、2-筛选融合、3-关联判证、4-原始数据导入
          isCreated: this.createnew ? "2" : "1", //是现有还是创建 1-现有表单、2-创建新表单
        };
        let res = await this.$api.rongheExportToDatabase(data);
        if (res.code === 200) {
          this.$message({
            message: res.result,
            type: "success",
            onClose: () => {
              this.daochuDialogFlag = false;
            },
          });
        }
      } else {
        this.$message({
          message: "请先选择并确认导入的表~",
          type: "warning",
        });
      }
    },
    // 融合结果导出到新表 isCreated为2
    async ysjtqDaochuZhaiquShujuGoNewBiaoDataFn(selected) {
      if (this.currentTreeItem) {
        let data = {
          exportTableId: this.currCheckId,
          dataIds: selected.map((e) => e.id), //页面保存勾选的数据
          operationType: 4, //操作类型，1-元数据摘取、2-筛选融合、3-关联判证、4-原始数据导入
          isCreated: this.createnew ? "2" : "1", //是现有还是创建 1-现有表单、2-创建新表单
          dataType: this.datachecktype, //左侧勾选有没有子集 最外层1  内层是2
          tableName: this.currentTreeItem.dataTypeName, //新建表单时需要传表名
          dataTypeId: this.currentTreeItem.dataTypeId, //数据类型，左侧树中对应的该表的类型
          databaseType: this.currentTreeItem.databaseType, //数据库类型，左侧树中对应的该表的类型
        };
        let res = await this.$api.rongheExportToDatabase(data);
        if (res.code === 200) {
          this.$message({
            message: res.result,
            type: "success",
            onClose: () => {
              this.daochuDialogFlag = false;
            },
          });
        }
      } else {
        this.$message({
          message: "请先选择并确认导入的表~",
          type: "warning",
        });
      }
    },
    // 左右拖动代码逻辑
    handleResize() {
      this.initWidths();
    },
    initWidths() {
      const routerView = document.querySelector(".router_view");
      const itemLeft = document.querySelector(".itemLeft");
      if (routerView && itemLeft) {
        const containerWidth = routerView.clientWidth;
        const leftWidth = itemLeft.offsetWidth;
        const remainingWidth = containerWidth - leftWidth;
        this.centerWidth = remainingWidth / 2;
        this.rightWidth = remainingWidth / 2;
      }
    },
    startDragH(e) {
      this.draggingH = true;
      this.startX = e.clientX;
      this.startCenterWidth = this.centerWidth;
      this.startRightWidth = this.rightWidth;
    },
    onDrag(e) {
      if (!this.draggingH) return;
      const deltaX = e.clientX - this.startX;
      let newCenterWidth = this.startCenterWidth + deltaX;
      let newRightWidth = this.startRightWidth - deltaX;
      // 应用最小宽度限制
      if (
        newCenterWidth >= this.minCenterWidth &&
        newRightWidth >= this.minRightWidth
      ) {
        this.centerWidth = newCenterWidth;
        this.rightWidth = newRightWidth;
      }
    },
    endDrag() {
      this.draggingH = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-pagination__rightwrapper {
  display: flex;
  align-items: center;
}
.database_wrap {
  width: 100%;
  height: 100%;
  min-width: 1600px;
  .el-checkbox {
    width: 90% !important;
  }
  // 新增dialog
  // .new_add_dialog {
  //   ::v-deep .el-dialog {
  //     height: 90vh;
  //     .el-dialog__body {
  //       height: 91%;
  //       box-sizing: border-box;
  //       padding: 30px 20px;
  //       max-height: 91%;
  //       min-height: 91%;
  //     }
  //   }
  // }

  .addContent {
    // padding: 20px;
    // height: 90%;
    .addItem {
      display: flex;
      align-items: center;
      margin-bottom: 32px;
      width: 100%;

      .addInput {
        margin-left: 10px;
        width: 100%;
      }

      .addChekoutRaio {
        margin-left: 10px;

        ::v-deep .el-radio {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 18px !important;
          color: #ffffff;
          line-height: 0px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        ::v-deep .el-radio__inner {
          background: inherit;
          border: 3px solid #02fff4;
          width: 18px;
          height: 18px;
        }

        ::v-deep .el-radio__inner::after {
          background-color: #02fff4;
          width: 10px;
          height: 10px;
        }

        ::v-deep .el-radio__input.is-checked + .el-radio__label {
          color: #02fff4;
        }
      }

      .addChekoutFile {
        border: 0;
        margin-right: 0;

        ::v-deep .el-checkbox__label {
          font-size: 18px !important;
          color: #fff !important;
        }

        ::v-deep .el-checkbox__inner {
          width: 22px;
          height: 22px;
          background: inherit !important;
          border: 1px solid #02fff4;
        }

        ::v-deep .is-checked {
          .el-checkbox__inner {
            &::after {
              box-sizing: content-box;
              content: "";
              background: #02fff4;
              height: 10px;
              left: 4px;
              position: absolute;
              top: 5px;
              width: 10px;
              transition: transform 0.15s ease-in 0.05s;
              transform-origin: center;
              transform: rotate(90deg) scaleY(1);
              border: 0 !important;
            }
          }
        }
      }
    }

    .exportInput {
      width: 90%;
      height: 40px;
      border-radius: 0px 0px 0px 0px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      text-transform: none;
      background: inherit;

      ::v-deep .el-input__inner::-moz-placeholder {
        color: #fff !important;
      }

      ::v-deep .el-input__inner::-webkit-input-placeholder {
        color: #fff !important;
      }

      ::v-deep .el-input__inner {
        background-color: inherit;
        border: 1px solid #02fff4;
        color: #fff;
      }

      ::v-deep .el-input-group__append {
        background: rgba(2, 255, 244, 0.1);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #02fff4;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #02fff4;
        text-align: center;
        font-style: normal;
        text-transform: none;
        cursor: pointer;
      }
    }

    .addName {
      width: 90px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      text-transform: none;
      flex: 0 0 auto;
    }

    .ls {
      width: 170px;
    }

    .selectFile {
      width: 250px;
      height: 36px;
      background: #001b3c;
      box-shadow: inset 0px 0px 20px 1px #02fff4;
      border: 1px solid #02fff4;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: rgba(2, 255, 244, 1);
      line-height: 36px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      opacity: 0.5;
      cursor: pointer;
      text-align: center;
    }
  }

  .btnContent {
    text-align: center;
    padding: 0 20px;
  }
  .host_btn {
    display: flex;
    justify-content: space-between;
    .host {
      height: 32px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 32px;
    }
    .btns {
      margin-right: 5%;
    }
  }

  .database {
    width: 100%;
    height: 100%;
    background: url("../../assets/big_bg.png") center center no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 85px;
    position: relative;

    .top_header_wrap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    .router_view {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 18px;
      display: flex;
      justify-content: space-between;
      .itemLeft,
      .itemCenter,
      .itemRight {
        height: 100%;
        background: rgba(2, 82, 107, 0.6);
        border: 1px solid #02fff4;
        .itemList {
          width: 100%;
          height: calc(100% - 50px);
          padding: 20px;
          box-sizing: border-box;
        }
      }
      .itemLeft {
        flex: 0 0 20%;
        margin-right: 10px;
        .itemList {
          overflow-y: scroll;
          text-align: right;
        }
      }
      .divider-h {
        width: 10px;
        height: 100%;
        line-height: 100%;
        margin: auto 0;
        color: #fff;
        cursor: col-resize; /* 鼠标悬停时显示东西方向箭头 */
        background-color: rgba(239, 235, 235, 0.1);
      }
      .itemCenter,
      .itemRight {
        min-width: 460px;
      }
      .itemCenter {
        .itemList {
          position: relative;
          .tableHeight {
            position: absolute;
            top: 0;
            height: calc(100% - 75px);
          }
        }
        .addBtnzz {
          width: 100px;
          height: 45px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          line-height: 45px;
          font-style: normal;
          text-transform: none;
          text-indent: 44px;
          background: url("../../assets/btn.png") center center no-repeat;
          background-size: 100% 100%;
          margin-right: 10px;
          cursor: pointer;
          position: relative;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../assets/zhuanhuan.png") center center
              no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 13px;
            content: "";
          }
        }

        .addBtnexport {
          width: 100px;
          height: 45px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          line-height: 45px;
          font-style: normal;
          text-transform: none;
          text-indent: 44px;
          background: url("../../assets/btn.png") center center no-repeat;
          background-size: 100% 100%;
          margin-right: 10px;
          cursor: pointer;
          position: relative;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../assets/exporticon.png") center center
              no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 7px;
            content: "";
          }
        }
      }
      .itemRight {
        .addBtnexport {
          text-indent: 24px;
          margin-right: 20px;
          position: relative;
          &::before {
            width: 18px;
            height: 18px;
            background: url("../../assets/exporticon.png") center center
              no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 10px;
            content: "";
          }
        }
      }

      .itemLefthead {
        width: 100%;
        height: 50px;
        background: rgba(2, 255, 244, 0.15);
        border-radius: 0px 0px 0px 0px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
        line-height: 50px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        text-indent: 31px;
        position: relative;
        align-items: center;
        justify-content: space-between;

        &::before {
          width: 5px;
          height: 20px;
          background: #02fff4;
          border-radius: 0px 0px 0px 0px;
          position: absolute;
          left: 20px;
          top: 16px;
          content: "";
        }

        display: flex;

        .itemCenterbtn {
          display: flex;
        }

        .addBtn {
          width: 100px;
          height: 45px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          line-height: 45px;
          font-style: normal;
          text-transform: none;
          text-indent: 44px;
          background: url("../../assets/btn.png") center center no-repeat;
          background-size: 100% 100%;
          margin-right: 10px;
          cursor: pointer;
          position: relative;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../assets/addjia.png") center center no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 13px;
            content: "";
          }
        }
      }
    }
  }

  .item-checkd {
    width: 100%;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    text-align: left;
    font-style: normal;
    border: 0;
    text-transform: none;
    background: url("../../assets/inputimg.png") center center no-repeat;
    background-size: 100% 100%;
    margin-bottom: 10px;
    padding: 12px 0 38px 19px;
    margin-left: 0 !important;

    ::v-deep .el-checkbox__label {
      font-size: 18px !important;
      color: #fff !important;
    }

    ::v-deep .el-checkbox__inner {
      width: 22px;
      height: 22px;
      background: inherit !important;
      border: 1px solid #02fff4;
    }

    ::v-deep .is-checked {
      .el-checkbox__inner {
        &::after {
          box-sizing: content-box;
          content: "";
          background: #02fff4;
          height: 10px;
          left: 4px;
          position: absolute;
          top: 5px;
          width: 10px;
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
          transform: rotate(90deg) scaleY(1);
          border: 0 !important;
        }
      }
    }
  }

  .e-checkd {
    width: calc(100% - 20px);
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    text-align: left;
    font-style: normal;
    border: 1px solid rgba(2, 255, 244, 1);
    text-transform: none;
    background-color: rgba(3, 23, 34, 1);
    margin-bottom: 10px;
    padding: 12px 0 38px 19px;
    margin-left: 0 !important;
    margin-right: 0 !important;

    ::v-deep .el-checkbox__label {
      font-size: 18px !important;
      color: #fff !important;
      // 制作省略号
      width: 89%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    ::v-deep .el-checkbox__inner {
      width: 22px;
      height: 22px;
      background: inherit !important;
      border: 1px solid #02fff4;
    }

    ::v-deep .is-checked {
      .el-checkbox__inner {
        &::after {
          box-sizing: content-box;
          content: "";
          background: #02fff4;
          height: 10px;
          left: 4px;
          position: absolute;
          top: 5px;
          width: 10px;
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
          transform: rotate(90deg) scaleY(1);
          border: 0 !important;
        }
      }
    }
  }

  .editBtn {
    cursor: pointer;
    color: #02fff4;
  }

  .pageBox {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .bin_fenyeqi {
      display: block !important;
      width: 100%;
    }

    .pageInfo {
      height: 18px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      text-transform: none;

      .size {
        color: #02fff4;
      }
    }
  }
}

.edit_dialog {
  .edit_list {
    box-sizing: border-box;

    .edit_item {
      display: flex;
      align-items: center;
      margin-bottom: 18px;

      .name {
        flex: 0 0 auto;
        width: 120px;
        font-size: 18px;
        color: #fff;
      }

      .ipt {
        flex: 1 1 auto;
        width: 0;
      }
    }
  }

  .edit_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
}

.convert_dialog {
  .convert_main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .convert_boxs {
      flex: 1 1 auto;
      background: #072f46;
      border: 1px solid #02fff4;

      .boxs_title {
        width: 100%;
        height: 50px;
        background: rgba(2, 255, 244, 0.2);
        font-size: 18px;
        line-height: 50px;
        color: #fff;
        box-sizing: border-box;
        padding: 0 20px;
      }

      .boxs_content {
        box-sizing: border-box;
        padding: 20px 25px;

        .el-row {
          // line-height:40px;
          margin-bottom: 10px;

          .boxs_item {
            display: flex;
            align-items: center;
            margin-top: 15px;

            &:first-child {
              margin-top: 0;
            }

            .name {
              flex: 0 0 auto;
              font-size: 18px;
              color: #fff;
              width: 130px;
            }

            .ipt {
              flex: 1 1 auto;
              width: 0;

              ::v-deep .el-radio {
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 18px !important;
                color: #ffffff;
                line-height: 0px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              ::v-deep .el-radio__inner {
                background: inherit;
                border: 3px solid #02fff4;
                width: 18px;
                height: 18px;
              }

              ::v-deep .el-radio__inner::after {
                background-color: #02fff4;
                width: 10px;
                height: 10px;
              }

              ::v-deep .el-input__inner {
                color: #fff;
                border-color: #02fff4 !important;
                background-color: transparent !important;
              }
            }
          }
        }
      }
    }

    .convert_center {
      flex: 0 0 auto;
      width: 80px;
      height: 50px;
      margin: 0 20px;
      background: #072f46;
      box-shadow: inset 0px 0px 5px 1px #02fff4;
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #02fff4;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        color: #02fff4;
        font-weight: 700;
        font-size: 28px;
      }
    }
  }

  .convert_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
}

.daochu_wrap {
  .daochu_type,
  .daochu_shujuku_type {
    display: flex;
    align-items: center;
    margin-bottom: 32px;

    .type_title {
      font-size: 18px;
      color: #fff;
      width: 110px;
    }
  }

  .daochu_shujuku_wrap {
    .daochu_shujuku_main {
      display: flex;

      .shujuku_tree_title {
        flex: 0 0 auto;
        font-size: 18px;
        color: #fff;
        width: 110px;
      }

      .shujuku_tree_wrap {
        flex: 1 1 auto;
        width: 0;
        height: 340px;
        border: 1px solid #02fff4;
        overflow: hidden;
        padding: 20px;

        .bin_tree_main {
          width: 100%;
          height: 100%;
          overflow: auto;
        }
      }
    }
  }

  .daochu_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
  }
}

.convert_status {
  box-sizing: border-box;
  padding-top: 22px;
  position: relative;
  margin-top: 32px;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 1px;
    padding: 0 30px;
    background-color: #02fff4;
    transform: translateX(-50%);
  }

  .convert_status_item {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;

    .icon {
      margin-right: 6px;
      font-weight: 700;
      font-size: 20px;
    }

    &.status_ing {
      background: rgba(0, 105, 138, 0.3);
      box-shadow: inset 0px 0px 20px 1px #02fff4;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid rgba(2, 255, 244, 0.5);
      color: #02fff4;
    }

    &.status_done {
      background: rgba(34, 154, 110, 0.3);
      box-shadow: inset 0px 0px 20px 1px #26da9f;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #07cd8c;
      color: #26da9f;
    }

    &.status_fail {
      background: rgba(199, 0, 47, 0.3);
      box-shadow: inset 0px 0px 20px 1px #c7002f;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid rgba(199, 0, 47, 0.5);
      color: #c7002f;
    }
  }
}

.title_label {
  background-color: rgba(2, 255, 244, 0.15);
  width: 100%;
  height: 50px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
  line-height: 50px;
  text-align: left;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  .switch-after {
    font-size: 14px;
  }
}

::v-deep .el-form-item__label {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
  padding: 0 2px 0 0;
}

.info_box,
.params_box,
.output_box {
  padding: 20px 40px;
  padding-bottom: 0;
}

.paramsItem,
.outputItem {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin-bottom: 20px;

  .params_form_box,
  .output_form_box {
    width: calc(100% - 48px);

    .form_title {
      background-color: rgba(2, 255, 244, 0.1);
      height: 40px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #fff;
      line-height: 40px;
      display: flex;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .miniform_box {
      background: rgba(2, 82, 107, 0.2);
      padding: 20px;
      box-sizing: border-box;

      .el-form-item {
        &:last-child {
          margin-bottom: 0;
        }
      }

      .line {
        text-align: center;
        color: #fff;
      }
    }
  }

  .del {
    cursor: pointer;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(12, 81, 99, 0.5);
  }
}

::v-deep .upload-demo {
  .el-upload-list__item {
    cursor: pointer;
    background: rgba(2, 255, 244, 0.1);

    .el-upload-list__item-name {
      color: #fff;

      .el-icon-document {
        color: #fff;
      }
    }

    .el-icon-close {
      color: #fff;
    }
  }
}
</style>
